<template>
    <div class="main">
        <van-cell title="专属名片" is-link value="更新头像" @click="generateQrCard(true)">
            <template #right-icon>
                <van-icon name="replay" class="search-icon"></van-icon>
            </template>
            <template #title>
                <span>{{contact.name}}</span>
                <span style="font-size: x-small;font-weight: lighter;padding-left: 5px;">的专属名片</span>
            </template>
        </van-cell>
        <van-image
            fit="scale-down"
            class="qrcode"
            :src="qrCodeCardUrl"
        />
        <van-row gutter="20" style="margin: 0px 15px">
            <van-button type="primary" size="small" block @click="transmit">发送专属名片</van-button>
        </van-row>
        <van-cell title="Ta邀请的客户" is-link value="查看">
            <template #label>
                <span class="invite-num">18人</span>
            </template>
        </van-cell>
        <van-row>
            <div class="description">
                一客一码可以为每一个客户生成专属名片，让客户带来客户，还能统计不同客户带来的添加好友数。<br/>  查看如何使用 一客一码
            </div>
        </van-row>

    </div>

</template>

<script>
import { mapGetters } from 'vuex'
import { sendChatMessage } from '@/utils/wxCodeAuth'
import { getQrCodeCard} from "@/api/yikeyima";
const wx = window.wx
// import { upload } from "@/utils/upload";
export default {
    name: "yikeyima",
    data (){
        return{
            detail: [],
            qrCodeCardUrl:undefined,
            medialId:undefined,
        }
    },
    created() {
        this.generateQrCard(false);
    },
    computed:{
        ...mapGetters([
            'contactId',
            'userInfo',
            'contact'
        ])
    },
    methods:{
        getInfo(){
            console.log(this.contactId)
        },
        transmit () {
            sendChatMessage(2,this.mediaId)
        },
        generateQrCard(refreshAvatar){
            wx.checkJsApi({
                jsApiList: ['chooseImage','downloadImage','getLocalImgData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    console.log('checkJsApi')
                    console.log(res)
                }
            });
            let params = {contactId:this.contactId,refreshAvatar:refreshAvatar};
            getQrCodeCard(params).then(resp=>{
                this.mediaId = resp.data.mediaId;
                this.qrCodeCardUrl = resp.data.url;
                console.log("getQrCodeCard complete.")
            })
        },
    }
}
</script>

<style scoped>
.main{
    margin: 0px 3px 0px 3px;
    background-color: #fff;
}
.tips{
    font-weight: lighter;
    font-size: 12px;
}
.search-icon {
    font-size: 16px;
    line-height: inherit;
}
.description{
    padding: 10px 10px 10px 10px;
    margin: 10px 2px 10px 2px;
    background-color: #FFFBE8;
    font-weight: lighter;
    font-size: small;
}
.qrcode{
    padding: 0px 15px;
}
.invite-num{
    font-size: large;
    font-weight: bold;
    color: #1e1e1e;
}

</style>
